<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/gou.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>

<body>
	<div class="gou_bar">
		<div class="inner">
			<a href="index.php"><img src="img/logo.png" /></a>
			<ul class="bar_ul">
				<li>我的购物车</li>
				<li>确认订单信息</li>
				<li>等待付款</li>
				<li>订单执行</li>
			</ul>
		</div>

	</div>

	<div class="shopping">
		<h4>保税区</h4>

		<table id="cartTable">
			<thead>
				<tr>
					<th><label><input class="check-all check" type="checkbox" />&nbsp;全选</label></th>
					<th>商品信息</th>
					<th>商品单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/20150708112148lm2t0.jpg"
							alt="" /><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）</span></td>
					<td class="price">59.88</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">220.88</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/201509091748430829.jpg"
							alt="" /><span>日本Merries花王新生儿纸尿裤S82</span></td>
					<td class="price">388.50</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">388.50</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
					<td class="price">148.50</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">1428.50</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
				<tr>
					<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
					<td class="goods"><img src="img/images/201608081427026196.jpg"
							alt="" /><span>韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货 </span></td>
					<td class="price">640.60</td>
					<td class="count"><span class="reduce"></span><input class="count-input" type="text"
							value="1" /><span class="add">+</span></td>
					<td class="subtotal">640.60</td>
					<td class="operation"><span class="delete">删除</span></td>
				</tr>
			</tbody>
		</table>
		<div class="foot" id="foot">
			<label class="fl select-all"><input type="checkbox" class="check-all check" />&nbsp;全选</label>
			<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>

			<div class="fr closing">立即购买</div>
			<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
			<div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
					class="arrow up">︽</span><span class="arrow down">︾</span></div>
			<div class="selected-view">
				<div id="selectedViewList" class="clearfix">
				</div>
				<span class="arrow">◆<span>◆</span></span>
			</div>
		</div>
	</div>


	<div class="last">
		<h5 class="last_h5">
			<img src="img/trduty_bg.jpg" />
			个人邮递进口物品清关税收解读
		</h5>
		<div class="last_bot">
			<ul>
				<li class="last_li0">个人邮递进境物品须界定为<a class="last_bot_sp1" href="">个人自用</a></li>
				<li><span class="last_li1">免征税</span>奶粉线征收跨境税，<span
						class="last_bot_sp2">取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span></li>
				<li><span
						class="last_li2">非个人清关</span>奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；
				</li>
				<li><span class="last_li3">被税</span>自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。
				</li>
			</ul>
		</div>
	</div>


	<div class="BOTTOM">
		<div class="BB">
			<img src="img/bot_slogan.png" alt="" />
		</div>
	</div>
	<!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
	<div class="BigBottom">
		<div class="Big">
			<div class="Big1">
				<p><a style="color: white;" href="#">海淘橙</a></p>
				<p class="Big1a"><a href="#">关于我们</a></p>
				<p class="Big1a"><a href="#">免责声明</a></p>
				<p class="Big1a"><a href="#">联系我们</a></p>
			</div>
			<div class="Big2">
				<p><a style="color: white;" href="#">海淘橙</a></p>
				<p class="Big1a"><a href="#">意见/建议</a></p>
				<p class="Big1a"><a href="#">海淘购物</a></p>
				<p class="Big1a"><a href="#">友情链接</a></p>
			</div>
			<div class="Big3">
				<p><a style="color: white;" href="#">帮助中心</a></p>
				<p class="Big1a"><a href="#">新手指南</a></p>
				<p class="Big1a"><a href="#">常见问题</a></p>
				<p class="Big1a"><a href="#">正品保证</a></p>
				<p class="Big1a"><a href="#">物流配送</a></p>
			</div>
			<div class="Big4">
				<p><a style="color: white;" href="#">资讯频道</a></p>
				<p class="Big1a"><a href="#">海淘咨询</a></p>
				<p class="Big1a"><a href="#">网站公告</a></p>
				<p class="Big1a"><a href="#">网站地图</a></p>
			</div>
			<div class="Big5"></div>
			<div class="Big6"></div>
			<div class="Big7">
				<span class="Big7a">微信订阅号</span>
				<span class="Big7b">扫一扫有惊喜</span>
				<img src="img/emw1.png" alt="" />
			</div>
			<div class="Big7">
				<span class="Big7a">微信订阅号</span>
				<span class="Big7b">扫一扫有惊喜</span>
				<img src="img/emw1.png" alt="" />
			</div>
			<div class="Big8"></div>
			<div class="Big9"></div>
			<div class="Big10">
				<p class="Big10a">关注我们</p>
				<img src="img/xlkjk.png" alt="" />
				<p class="Big10c">邮件订阅</p>
				<input class="Big10d" type="text" placeholder="请输入您的邮箱地址，订阅最新优惠" />
				<div class="Big10e">订阅</div>
			</div>
			<div class="Big11"></div>
			<div class="Big12"></div>
			<div class="Big13">Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights Reserved.粤ICP备14073754号-1</div>
		</div>
	</div>

	<!--右侧购物栏-->
	<div class="right_l">
		<div class="regist_wrap">
			<div class="regist"></div>
		</div>
		<div class="regist_wrap2">
			<div class="regist2"></div>
			<p>一键购</p>
		</div>
		<div class="regist_wrap3">
			<div class="regist3"></div>
			<p>购物车</p>
		</div>
		<div class="regist_wrap4">
			<div class="regist4"></div>
		</div>
		<div class="regist_wrap5">
			<div class="regist5"></div>
		</div>
		<div class="regist_wrap6">
			<div class="regist6"></div>
		</div>
		<div class="regist_wrap7">
			<div class="regist7"></div>
		</div>

		<div class="regist_wrap8">
			<div class="regist8"></div>
		</div>
	</div>
	<script>
		// 数据驱动思维；
		// 数据优先;
		var data = [
			{
				pname: "飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）",
				price: 59.88,
				num: 1,
				ischecked: false,
				img: "img/images/20150708112148lm2t0.jpg"
			},
			{
				pname: "日本Merries花王新生儿纸尿裤S82",
				price: 388.5,
				num: 1,
				ischecked: false,
				img: "img/images/201509091748430829.jpg"
			},
			{
				pname: "Sony/索尼 DSC-WX300",
				price: 148.5,
				num: 1,
				ischecked: false,
				img: "img/images/3.jpg"
			}, {
				pname: "韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货",
				price: 640.6,
				num: 1,
				ischecked: false,
				img: "img/images/201608081427026196.jpg"
			},

		];



		// 根据数据渲染 视图；
		renderDom(data);
		// 和所有的视图操作有关；
		function renderDom(data) {
			var tbody = document.querySelector("tbody");
			tbody.innerHTML = "";
			data.forEach(function (item) {
				var trEle = document.createElement("tr");
				if (item.ischecked) {
					var isCheckStr = `<input class="check-one check" checked  type="checkbox" />`;
				} else {
					var isCheckStr = `<input class="check-one check"   type="checkbox" />`;
				}

				// 通过数据来判断是否有减号 
				// if(item.num<=1){
				// 	var minus = `<span class="reduce"></span>`;
				// }else{
				// 	var minus = `<span class="reduce">-</span>`;
				// }

				// ${}--->插值表达式，可以接收简单的运算和逻辑(三元运算符)  {{}}--》{}---》{$str};
				// `fdsafda`--->模板字符串；
				trEle.innerHTML = `<td class="checkbox">
						${isCheckStr}
					</td>
					<td class="goods"><img src="${item.img}"
							alt="" /><span>${item.pname}</span></td>
					<td class="price">${item.price}</td>
					<td class="count">${item.num <= 1 ? '<span class="reduce"></span>' : '<span class="reduce">-</span>'}<input class="count-input" type="text"
							value="${item.num}" /><span class="add">+</span></td>
					<td class="subtotal">${item.price * item.num}</td>
					<td class="operation"><span class="delete">删除</span></td>`;
				tbody.appendChild(trEle);
			})
			// 从新添加点击事件；
			addEvent();
		}


		// 添加数量操作
		// 先操作数据，然后再渲染视图
		// function addEvent() {
		// 	// 添加数量操作
		// 	var addEles = document.querySelectorAll(".add");
		// 	addEles.forEach(function (item, key) {
		// 		item.onclick = function () {
		// 			// console.log(key);
		// 			data[key].num += 1;
		// 			console.log(data);
		// 			renderDom(data);
		// 			countTotal()
		// 		}
		// 	})

		// 	// 减少数量
		// 	var minusEles = document.querySelectorAll(".reduce");

		// 	minusEles.forEach(function (item, key) {
		// 		item.onclick = function () {
		// 			// 先操作数据
		// 			if (data[key].num > 1) {
		// 				data[key].num -= 1;

		// 				//渲染视图；
		// 				renderDom(data);
		// 				countTotal()
		// 			}
		// 		}
		// 	})


		// 	// 删除操作
		// 	// 先删除数据，在渲染视图
		// 	var deleteEles = document.querySelectorAll(".delete");
		// 	deleteEles.forEach(function (item, key) {
		// 		item.onclick = function () {
		// 			// 先删除数据；
		// 			data.splice(key, 1);
		// 			console.log(data);
		// 			renderDom(data);
		// 			countTotal()
		// 		}
		// 	})


		// 	// 单选和全选 
		// 	var checkOneEles = document.querySelectorAll(".check-one");
		// 	checkOneEles.forEach(function (item, key) {
		// 		item.onclick = function () {

		// 			// console.log(this.checked);
		// 			data[key].ischecked = this.checked;
		// 			console.log(data);
		// 			// 判断是否全选 
		// 			var res = data.every(function (item) {
		// 				return item.ischecked;
		// 			})
		// 			console.log(res);
		// 			// 放在数据修改了之后 在调用计算的方法；
		// 			countTotal()
		// 			// 修改全选的状态
		// 			var checkAllEles = document.querySelectorAll(".check-all");
		// 			checkAllEles.forEach(function (item) {
		// 				item.checked = res;
		// 			})
		// 		}
		// 	})



		// 	// 删除勾选的内容
		// 	// 持久化保存
		// 	var delEle = document.querySelector("#deleteAll");
		// 	delEle.onclick = function () {
		// 		// 删除数据
		// 		// 数据筛选 
		// 		var res = data.filter(function (item) {
		// 			return item.ischecked == false;
		// 		})
		// 		data = res;
		// 		if(data.length==0){
		// 			var checkAllEles = document.querySelectorAll(".check-all");
		// 			checkAllEles.forEach(function (item) {
		// 				item.checked = false;
		// 			})
		// 		}
		// 		// console.log(res);
		// 		renderDom(res);
		// 	}



		// 	// 计算勾选数量 和 总价 
		// 	function countTotal(){
		// 		// 计算数据 
		// 		// 产品数量
		// 		var num = 0;
		// 		var total = 0;
		// 		data.forEach(function(item){
		// 			if(item.ischecked){
		// 				num += item.num;
		// 				var subTotal = item.num * item.price;
		// 				total+=subTotal;
		// 			}
		// 		})
		// 		console.log(total);
		// 		// 更改视图；
		// 		document.querySelector("#selectedTotal").innerHTML = num;

		// 		document.querySelector("#priceTotal").innerHTML = total;

		// 		// 计算总价 




		// 	}


		// 	// 点击全选 每一个产品勾选上
		// 	var checkAllEles = document.querySelectorAll(".check-all");
		// 	checkAllEles.forEach(function(item){
		// 		item.onclick = function(){
		// 			// 需要把所有的checked 都改成和全选一样的状态；
		// 			// 先修改数据
		// 			var that = this;
		// 			data.forEach(function(item){
		// 				item.ischecked = that.checked;
		// 			})
		// 			// 把2个全选按钮的状态改成一致；
		// 			checkAllEles.forEach(function(item){
		// 				item.checked = that.checked;
		// 			})

		// 			renderDom(data);
		// 		}
		// 	})

		// }






		// 事件委托

		function addEvent() {

			// var addEles = document.querySelectorAll(".add");
			// addEles.forEach(function (item, key) {
			// 	item.onclick = function () {
			// 		// console.log(key);
			// 		data[key].num += 1;
			// 		console.log(data);
			// 		renderDom(data);
			// 		countTotal()
			// 	}
			// })

			var trEles = document.querySelectorAll("tbody tr");

			trEles.forEach(function (tr, key) {
				tr.onclick = function (e) {
					var target = e.target;
					// 添加数量
					if (target.className == "add") {
						console.log("点击了+号");
						data[key].num += 1;
						renderDom(data);
						countTotal()
					}
					// 减少数量
					if (target.className == "reduce") {
						if (data[key].num > 1) {
							data[key].num -= 1;
							//渲染视图；
							renderDom(data);
							countTotal()
						}
					}

					// 删除操作
					if (target.className == "delete") {
						// 先删除数据；
						data.splice(key, 1);
						console.log(data);
						renderDom(data);
						countTotal()
					}

					// 单选和全选 
					if (target.classList.contains("check-one")) {
						// console.log("点击了勾选")
						// console.log(this.checked);
						data[key].ischecked = target.checked;
						console.log(data);
						// 判断是否全选 
						var res = data.every(function (item) {
							return item.ischecked;
						})
						console.log(res);
						// 放在数据修改了之后 在调用计算的方法；
						countTotal()
						// 修改全选的状态
						var checkAllEles = document.querySelectorAll(".check-all");
						checkAllEles.forEach(function (item) {
							item.checked = res;
						})
					}

				}

			})





			// 减少数量
			// var minusEles = document.querySelectorAll(".reduce");

			// minusEles.forEach(function (item, key) {
			// 	item.onclick = function () {
			// 		// 先操作数据
			// 		if (data[key].num > 1) {
			// 			data[key].num -= 1;

			// 			//渲染视图；
			// 			renderDom(data);
			// 			countTotal()
			// 		}
			// 	}
			// })


			// 删除操作
			// 先删除数据，在渲染视图
			// var deleteEles = document.querySelectorAll(".delete");
			// deleteEles.forEach(function (item, key) {
			// 	item.onclick = function () {
			// 		// 先删除数据；
			// 		data.splice(key, 1);
			// 		console.log(data);
			// 		renderDom(data);
			// 		countTotal()
			// 	}
			// })


			// 单选和全选 
			// var checkOneEles = document.querySelectorAll(".check-one");
			// checkOneEles.forEach(function (item, key) {
			// 	item.onclick = function () {

			// 		// console.log(this.checked);
			// 		data[key].ischecked = this.checked;
			// 		console.log(data);
			// 		// 判断是否全选 
			// 		var res = data.every(function (item) {
			// 			return item.ischecked;
			// 		})
			// 		console.log(res);
			// 		// 放在数据修改了之后 在调用计算的方法；
			// 		countTotal()
			// 		// 修改全选的状态
			// 		var checkAllEles = document.querySelectorAll(".check-all");
			// 		checkAllEles.forEach(function (item) {
			// 			item.checked = res;
			// 		})
			// 	}
			// })



			// 删除勾选的内容
			// 持久化保存
			var delEle = document.querySelector("#deleteAll");
			delEle.onclick = function () {
				// 删除数据
				// 数据筛选 
				var res = data.filter(function (item) {
					return item.ischecked == false;
				})
				data = res;
				if (data.length == 0) {
					var checkAllEles = document.querySelectorAll(".check-all");
					checkAllEles.forEach(function (item) {
						item.checked = false;
					})
				}
				// console.log(res);
				renderDom(res);
			}



			// 计算勾选数量 和 总价 
			function countTotal() {
				// 计算数据 
				// 产品数量
				var num = 0;
				var total = 0;
				data.forEach(function (item) {
					if (item.ischecked) {
						num += item.num;
						var subTotal = item.num * item.price;
						total += subTotal;
					}
				})
				console.log(total);
				// 更改视图；
				document.querySelector("#selectedTotal").innerHTML = num;

				document.querySelector("#priceTotal").innerHTML = total;

				// 计算总价 




			}


			// 点击全选 每一个产品勾选上
			var checkAllEles = document.querySelectorAll(".check-all");
			checkAllEles.forEach(function (item) {
				item.onclick = function () {
					// 需要把所有的checked 都改成和全选一样的状态；
					// 先修改数据
					var that = this;
					data.forEach(function (item) {
						item.ischecked = that.checked;
					})
					// 把2个全选按钮的状态改成一致；
					checkAllEles.forEach(function (item) {
						item.checked = that.checked;
					})

					renderDom(data);
				}
			})




		}





// 把数据操作和视图操作分离开 
// 事件操作分开 
// 1.数据操作 2.视图操作 3.事件操作；


	</script>
</body>

</html>